<template>
  <div class="index-container">
    <!-- show -->
    <div class="show">
      <div class="img-box">
        <img class="index-img" src="@/assets/img/common/pic1.png" alt="" />
      </div>
      <div class="userInfo">
        <div class="welcome">
          <span>你好，{{ this.studentName }}</span>
          <span class="wel">欢迎使用恒星学院校园一卡通服务平台</span>
        </div>
        <div class="userDesc">
          <!-- <div class="common"> -->
          <span>
            学号：<span> {{ this.studentNum }} </span>
          </span>
          <span>
            姓名：<span> {{ this.studentName }} </span>
          </span>
          <span>
            院系：<span> {{ this.department }} </span>
          </span>
          <span>
            班级：<span> {{ this.class }} </span>
          </span>
          <div class="card-status">
            <span>一卡通状态：</span>
            <el-tag v-if="!this.cardStatus && !this.tag" size="mini" type="info">未申请</el-tag>
            <el-tag v-if="!this.cardStatus && this.tag == 1" size="mini" type="primary">待审核</el-tag>
            <el-tag v-if="this.cardStatus == 1 && !this.tag" size="mini" type="success">正常</el-tag>
            <el-tag v-if="this.cardStatus == 2 && !this.tag" size="mini" type="danger">已挂失</el-tag>
          </div>
        </div>
      </div>
    </div>
    <!-- func -->
    <div class="function-box">
      <div class="card">
        <div class="function-item" v-for="item in list" :key="item.id" @click="toPage(item.url)">
          <img :src="getImg(item.img)" />
          <span class="title">{{ item.title }}</span>
        </div>
      </div>
      <div class="info-box">
        <div class="info">
          <div class="title">最新资讯</div>
          <ul class="super-info">
            <!-- @click="toPage(item.url)" -->
            <li :href="item.url" v-for="item in news" :key="item.id">
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- service -->
    <div class="common-use">
      <div class="title">
        <div class="text">
          <span>常用服务</span>
        </div>
      </div>
      <div class="service">
        <div class="common-item" v-for="item in serviceList" :key="item.id" @click="toPage(item.url)">
          <div class="img-box">
            <img :src="getImg(item.img)" />
          </div>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
    <!-- link -->
    <div class="link">
      <div class="title">
        <div class="text">
          <span>友情链接</span>
        </div>
      </div>
      <div class="to-link">
        <a :href="item.url" v-for="item in linkList" :key="item.id"
          ><el-tag>{{ item.title }}</el-tag></a
        >
      </div>
    </div>
    <!-- 问题解答对话框 -->
    <el-dialog title="问题答疑" :visible.sync="dialogVisible" width="50%">
      <p>Question1:如何申请办理校园一卡通？</p>
      <p>
        <span
          >Answer:登录校园一卡通服务平台后，在首页点击一卡通申请或在服务中心点击一卡通申请，完善相关信息即可进行办理。</span
        >
        <br />
      </p>
      <p>Question2:如何使用校园一卡通？</p>
      <p>
        <span>Answer:登录校园一卡通服务平台后，在首页点击一卡通使用即可查看相关教程</span>
        <br />
      </p>

      <!--  -->
      <p>Question3:使用校园一卡通平台的相关说明</p>
      <p>
        <span
          >Answer:首先使用学号密码登录平台，使用过程中要遵守中华人名共和个各项法律法规，遵守青岛恒星科技学院的各项校规校纪，营造文明健康的校园生活环境。</span
        >
        <br />
      </p>
      <br />
      <br />
      <p>更多具体内容请前往服务说明查阅</p>
    </el-dialog>
  </div>
</template>

<script>
import commonServe from '../api/service/common.serve'
export default {
  data() {
    return {
      // id: '1',
      studentId: window.sessionStorage.getItem('studentId'),
      studentNum: '',
      studentName: '',
      department: '',
      class: '',
      cardStatus: '',
      tag: '',
      dialogVisible: false,
      list: [
        {
          id: 1,
          url: '/applyCampus',
          img: 'apply.png',
          title: '一卡通申请'
        },
        {
          id: 2,
          url: '/campusUse',
          img: 'use.png',
          title: '一卡通使用'
        },
        {
          id: 3,
          url: '/serve',
          img: 'serve.png',
          title: '个人服务'
        },
        {
          id: 4,
          url: '',
          img: 'question.png',
          title: '问题解答'
        }
      ],
      news: [
        { id: 1, title: '校园防疫', url: '/#' },
        { id: 2, title: '喜报！我校获得第九届省级...', url: '/#' },
        { id: 3, title: '关于毕业生退费事宜', url: '/#' },
        { id: 4, title: '你好你好你好你好你好你好', url: '/#' }
      ],
      serviceList: [
        { id: 1, title: '我的账单', img: 'account.png', url: '/myBill' },
        { id: 2, title: '一卡通充值', img: 'card.png', url: '/chargeCampus' },
        { id: 3, title: '交网费', img: 'wifi.png', url: '/chargeNet' },
        {
          id: 4,
          title: '个人信息查看',
          img: 'personalInfo.png',
          url: '/lookPersonalInfo'
        },
        { id: 5, title: '修改密码', img: 'password.png', url: '/changePwd' },
        {
          id: 6,
          title: '水电费',
          img: 'electric.png',
          url: '/waterAndElectricity'
        }
      ],
      linkList: [
        {
          id: 1,
          url: 'http://www.qdhxu.edu.cn/',
          title: '青岛恒星科技学院官网'
        },
        {
          id: 2,
          url: 'https://www.cestarcollege.com/',
          title: '青岛恒星科技学院多伦多校区'
        },
        { id: 3, url: 'http://group.hx.cn/', title: '恒星集团' }
      ]
    }
  },
  created() {
    this.getUserInfo()
    this.getCardInfo()
  },
  methods: {
    // 获取学生信息
    getUserInfo() {
      commonServe
        .getStudentInfo(this.studentId)
        .then((res) => {
          // console.log(res, 123)
          if (res.code === 200) {
            let obj = res.data.item
            this.studentNum = obj.studentNum
            this.studentName = obj.studentName
            this.department = obj.department
            this.class = obj.classes
          } else {
            this.$message.warning('获取学生信息失败，请刷新重试')
          }
        })
        .catch((err) => {
          this.$message.warning('获取学生信息失败，请刷新重试' || err.message)
        })
    },
    // 查询一卡通状态
    getCardInfo() {
      commonServe
        .getCardInfo(this.studentId)
        .then((res) => {
          // console.log(res, 120)
          if (res.code === 200) {
            this.cardStatus = res.data.card.cardStatus
            this.tag = res.data.card.tag
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    getImg(src) {
      return require('@/assets/img/index/' + src)
    },
    // 跳转到对应的页面
    toPage(url) {
      if (url) {
        this.$router.push(url)
      } else {
        this.dialogVisible = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.index-container {
  .show {
    display: flex;
    justify-content: space-between;
    .img-box {
      height: 12.5rem;
      width: 60%;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .userInfo {
      width: 30%;
      border: 0.0625rem solid #ececec;
      border-radius: 0.3125rem;
      .welcome {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        font-size: 18px;
        font-weight: bold;
      }
      .userDesc {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        span {
          padding: 0.625rem 0;
        }
        .card-status {
          display: flex;
          align-items: center;
          .el-tag {
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
  .function-box {
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    .card {
      // width: 50rem;
      width: 60%;
      display: flex;
      justify-content: space-between;
      .function-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 10rem;
        height: 10rem;
        border: 0.0625rem solid #ececec;
        border-radius: 0.3125rem;
        .title {
          padding-top: 0.625rem;
          color: #666;
        }
      }
      .function-item:hover {
        border: 0.0625rem solid #3a62d7;
        cursor: pointer;
      }
    }
    .info-box {
      // width: 18.75rem;
      width: 30%;
      height: 11.25rem;
      //   border-radius: .3125rem;
      /*强制文字在一行文本框内*/
      white-space: nowrap;
      .info {
        border-radius: 0.3125rem;
        overflow: hidden;
        width: 100%;
        .title {
          display: flex;
          align-items: center;
          height: 2.5rem;
          background-color: #39a9db;
          color: #fff;
          font-size: 1.125rem;
        }
        .super-info {
          width: 100%;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          li {
            padding: 0.3125rem 0;
            color: #666;
          }
          li:hover {
            cursor: pointer;
            color: #39a9db;
          }
        }
      }
    }
  }
  .common-use {
    margin-top: 1.25rem;
    .title {
      display: flex;
      border-bottom: 0.0625rem solid #ececec;
      .text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.25rem;
        height: 1.875rem;
        border-radius: 0.1875rem;
        background-color: #39a9db;
        span {
          color: #fff;
        }
      }
    }
    .service {
      padding-top: 0.625rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .common-item {
        padding: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 0.0625rem solid transparent;
        border-radius: 0.1875rem;
        width: 9.375rem;
        height: 6.25rem;
        .img-box {
          width: 3.875rem;
          height: 3.875rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .common-item:hover {
        border: 0.0625rem solid #3a62d7;
        cursor: pointer;
      }
    }
  }
  .link {
    padding: 1.25rem 0 1.25rem 0;
    border-bottom: 0.0625rem solid #ececec;
    .title {
      display: flex;
      border-bottom: 0.0625rem solid #ececec;
      .text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.25rem;
        height: 1.875rem;
        border-radius: 0.1875rem;
        background-color: #39a9db;
        span {
          color: #fff;
        }
      }
    }
    .to-link {
      // border: .0625rem solid black;
      padding-top: 1.25rem;
      padding: 1.25rem 0 0 3.125rem;
      a {
        margin-right: 1.25rem;
      }
    }
  }
}
</style>
